<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row style="height: 100%" type="flex">
			<cl-biz-toolbar v-model="currBiz.biz_id" show-hq @change="bizChange" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div class="title">{{ currBiz.biz_name }}</div>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search" class="pr-1">
									<cl-filter label="关键字">
										<el-input
											v-model="search.keyword"
											placeholder="权限组名称"
											clearable
											style="width: 200px"
											@change="refresh()"
										/>
									</cl-filter>
								</cl-filter-group>
								<el-button icon="el-icon-plus" size="small" type="primary" @click="openForm()">
									新增权限组
								</el-button>
							</div>
						</el-row>
					</template>
					<!-- 数据表格 -->
					<div style="height: 100%" ref="tableBox">
						<cl-table v-bind="table">
							<cl-empty slot="empty" />
							<template #column-status="{ scope: { row } }">
								<el-tag :type="row.status == 1 ? '' : 'danger'">
									{{ row.status_name }}
								</el-tag>
							</template>
							<template #column-opt="{ scope: { row } }">
								<div class="flex flex-align-start">
									<el-button type="primary" @click="manageAuthGroup(row)">
										管理权限组
									</el-button>
									<el-button type="danger" @click="edit(row)"> 修改 </el-button>
									<el-button @click="remove(row)"> 删除 </el-button>
								</div>
							</template>
						</cl-table>
					</div>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<auth-group-form ref="form" @confirm="refresh" />
		<manage-auth-group ref="manageAuthGroup" @confirm="refresh" />
	</cl-crud>
</template>

<script>
import AuthGroupForm from "./components/auth-group-form";
import ManageAuthGroup from "./components/manage-auth-group";
export default {
	name: "CrmJurisdictionGroup",
	components: {
		AuthGroupForm,
		ManageAuthGroup
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						type: "index",
						label: "#",
						align: "center",
						width: 40,
						fixed: true
					},
					{
						label: "权限组名称",
						prop: "ro_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "描述",
						prop: "ro_desc",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "状态", prop: "status", width: 90 },
					{ label: "操作", prop: "opt", width: 245, fixed: "right" }
				],
				props: {
					maxHeight: 500
				}
			},
			search: {
				keyword: "",
				// parent_id: 0,
				showpage: 1
			},
			currBiz: {},
			load: false
		};
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.role).done();
			if (!this.load) return;
			app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			const { biz_id } = this.currBiz;
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		// 切换事业部
		bizChange(v) {
			this.currBiz = v;
			this.search.keyword = "";
			this.$nextTick(() => {
				this.onResize();
				this.refresh();
			});
		},
		//管理权限组
		async manageAuthGroup(row) {
			this.$refs.manageAuthGroup.open(row);
		},
		openForm(editing = false, data = {}) {
			console.log(data);
			this.$refs.form.open(editing, data);
		},
		//编辑
		edit(row) {
			this.openForm(true, row);
		},
		// 删除
		remove({ ro_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.role.remove({ ro_id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
.biz-box {
	height: 100%;
	width: 230px;
	box-shadow: 1px 0 1px -1px #969797;
}
</style>
